<template>
	<view class="content">
		<view class="cu-bar fixed" :style="Barheight">
			<image src="/static/top.jpg" style="width: 100%;height: 100%;"></image>
		</view>
		<cu-custom :isBack="true" :hasBackBtn="false" @clickLeft = "click1" bgColor="text-white">
			<block slot="backText"><text>{{city.name}}</text><text class="cuIcon-triangledownfill" style="margin-left: 6upx;"></text></block>
			<block slot="content">首页</block>
			<block slot="right">
				<navigator url="/pagesA/release/select/select">
					<text class="cuIcon-add" style="font-size: 40upx;line-height: 60upx;"></text>
				</navigator>
			</block>
			<block slot="more">
				<view class="cu-bar search" :style="[{top:(height-20) + 'px'}]">
					<navigator url="/pagesB/search/search" class="search-form radius">
						<text class="cuIcon-search"></text>
						<input :adjust-position="false" type="text" placeholder="搜索图片、文章、视频" confirm-type="search" disabled />
					</navigator>
				</view>
			</block>
		</cu-custom>
		<swiper class="screen-swiper square-dot" :indicator-dots="true" :circular="false"
		 :autoplay="false" duration="500">
			<swiper-item>
				<view class="cu-list grid col-5 no-border">
					<view class="cu-item" v-for="(item,index) in iconList" :key="index" v-if="index<10">
						<navigator :url="item.url">
							<image :src="'/static/icon/'+item.icon+'.png'" class="menu-icon" />
							<text>{{item.name}}</text>
						</navigator>
					</view>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="cu-list grid col-5 no-border">
					<view class="cu-item" v-for="(item,index) in iconList2" :key="index" v-if="index<10">
						<navigator :url="item.url">
							<image :src="'/static/icon/'+item.icon+'.png'" class="menu-icon" />
							<text>{{item.name}}</text>
						</navigator>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<view class="warp30"></view>
		<view class="model">
			<view class="model-header">
				<text class="model-header-title">猜你喜欢</text>
			</view>
			<view class="model-main">
				<view class="text-center padding-xs text-grey text-sl" v-if="hotList.length==0">
					暂无数据
				</view>
				<navigator :url="item.url+'?detailDate='+encodeURIComponent(JSON.stringify(item))" class="uni-flex uni-row model-item" v-for="(item,key) in likeList" :key="item.Id">
					<image class="model-item-img" src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg" />
					<view class="model-item-text" style="flex: 1;">
						<view class="model-item-title">
							<img :src="'/static/label/lable_'+item.TypeTagImg1+'.png'" :class="'label-box kind'+item.TypeTagImgLen1" v-if="item.TypeTagImg1!=''" />
							<img :src="'/static/label/lable_'+item.TypeTagImg2+'.png'" :class="'label-box kind'+item.TypeTagImgLen2" v-if="item.TypeTagImg2!=''" />
							{{item.Title}}
						</view>
						<view class="model-item-main">
							<text class="model-item-title2">{{item.Line1Display}}</text>
							<text class="model-item-title2 adr">{{item.Line2Display}}</text>
							<view class="model-item-title2 main">
								<text class="model-item-main-price">{{item.HighLightDisplay}}<text>{{item.HighLight2Display}}</text></text>
								<text>{{item.Line3Display}}</text>
							</view>
							<text class="model-item-title2">{{item.Line4Display}}</text>
						</view>
					</view>
				</navigator>
			</view>
		</view>
		<view class="warp30"></view>
		<view class="model">
			<view class="model-header">
				<text class="model-header-title">热文</text>
			</view>
			<view class="model-main">
				<view class="text-center padding-xs text-grey text-sl center" v-if="hotList.length==0">
					暂无数据
				</view>
				<navigator :url="'/pagesB/news/detail/detail?detailDate='+encodeURIComponent(JSON.stringify(item))" class="uni-row model-item" v-for="(item) in hotList" :key="item.Id">
					<view class="margin-bottom cu-avatar-box">
						<view class="uni-flex margin-bottom-sm">
							<view class="cu-avatar lg round margin-right" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big25002.jpg);"></view>
							<view>
								<view class="cu-avatar-name">{{item.UserName}}</view>
								<view class="cu-avatar-num">
									{{item.Line1Display}}
								</view>
							</view>
						</view>
						<view class="cu-avatar-main margin-bottom-sm">
							{{item.Abstract}}
						</view>
						<view class="cu-avatar-photo clearfix">
							<view v-for="(img,index) in item.Pics" v-if="item.Pics.length>1" :key="index" style="width: calc(33.3vw - 32upx);height: calc(20.8vw - 20upx);float: left;margin: 0 6upx;">
								<image src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg" style="width: 100%;height: 100%;"></image>
							</view>
							<view v-for="(img,index) in item.Pics" v-if="item.Pics.length==1" :key="index" style="width: calc(100vw - 72upx);height: calc(62.5vw - 45upx);float: left;margin: 0 6upx;">
								<image src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg" style="width: 100%;height: 100%;"></image>
							</view>
						</view>
					</view>
				</navigator>
			</view>
		</view>
		<view class="warp30"></view>
		<view class="cu-tabbar-height wx"></view>
	</view>
</template>

<script>
	import Vue from 'vue'
	export default {
		data() {
			return {
				city:{name:"未知",key:null},
				imgUrls: [{
						id:12,
						img: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg',
						price: 849900,
						bds: 3,
						ba: 1,
						sqft: 1283,
						title: "3157 Eccleston Ave,Walnut Creek,CA",
						type:"Architect"
					},
					{
						id:15,
						img: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg',
						price: 849900,
						bds: 3,
						ba: 1,
						sqft: 1283,
						title: "3157 Eccleston Ave,Walnut Creek,CA",
						type:"Architect"
					}
				],
				iconList: [{
					icon: 'icon_esf',
					name: '二手房',
					url:'/pages/house/sell/list/list?TypeIds=925dbf85-d72f-11e8-93e2-d8cb8acb9569'
				}, {
					icon: 'icon_zf',
					name: '租房',
					url:'/pages/house/rent/list/list'
				}, {
					icon: 'icon_xf',
					name: '新房',
					url:'/pages/house/new/list/list'
				}, {
					icon: 'icon_sp',
					name: '商铺',
					url:'/pages/house/sell/list/list?TypeIds=9274be18-d72f-11e8-93e2-d8cb8acb9569'
				}, {
					icon: 'icon_xzl',
					name: '写字楼',
					url:'/pages/house/sell/list/list?TypeIds=9275e49a-d72f-11e8-93e2-d8cb8acb9569'
				}, {
					icon: 'icon_bs',
					name: '别墅',
					url:'/pages/house/sell/list/list?TypeIds=927a71cf-d72f-11e8-93e2-d8cb8acb9569'
				}, {
					icon: 'icon_cw',
					name: '车位',
					url:'/pages/house/sell/list/list?TypeIds=927b7ef1-d72f-11e8-93e2-d8cb8acb9569'
				}, {
					icon: 'icon_cf',
					name: '厂房',
					url:'/pages/house/sell/list/list?TypeIds=927cbf9a-d72f-11e8-93e2-d8cb8acb9569'
				}, {
					icon: 'icon_zx',
					name: '装修',
					url:'/pagesB/service/list/list'
				}, {
					icon: 'icon_fw',
					name: '服务',
					url:'/pagesB/service/list/list'
				}],
				iconList2: [{
					icon: 'icon_hw',
					name: '好物',
					url:'/pagesB/goods/list/list'
				}, {
					icon: 'icon_jr',
					name: '金融',
					url:'/pages/house/new/list/list'
				}, {
					icon: 'icon_qg',
					name: '求购',
					url:'/pages/house/buy/list/list'
				}, {
					icon: 'icon_qz',
					name: '求租',
					url:'/pages/house/torent/list/list'
				},{
					icon: 'icon_zsj',
					name: '找商家',
					url:'/pagesB/business/list/list'
				}, {
					icon: 'icon_zxq',
					name: '找小区',
					url:'/pagesB/community/list/list'
				}],
				barheight:0,
				InputBottom: 0,
				timer:null,
				likeList:[],
				hotList:[],
			}
		},
		computed: {
			Barheight() {
				var barheight = this.CustomBar+20;
				var style = `height:${barheight}px`;
				return style
			}
		},
		onShow:function(){
			/* uni.showLoading({  
				title: '切换城市中'  
			}); */
			let _this = this;
			this.timer = setInterval(() => {
				uni.getStorage({
					key: 'city_key',
					success: function (res) {
						_this.city = res.data
					},
					fail:function(e){
						//console.log(e);
					}
				});
				if(_this.city.key!=null){
					clearInterval(_this.timer);
					_this.timer = null;
					//uni.hideLoading();
				}
			},1000);
		},
		onLoad:function(){
			this.getLikeList();
			this.getHotList(); 
		},
		methods: {
			click1(e) {
				let _this = this;
				this.$eventHub.$on('city', function(data) {
					_this.city = data;
					//清除监听，不清除会消耗资源
					_this.$eventHub.$off('city');
				});
				uni.navigateTo({
					url: '/pages/citypage/indexes?type=ZH'
				});
			},
			getHotList() {
				let data = {top:2};
				uni.request({
					url: this.AjaxUrl + '/WebApi/GetHomeHotNewsList',
					data:data,
					success: (res) => {
						if (res.statusCode == 200) {
							this.hotList = JSON.parse(res.data.Extend);
						}
					},
					fail: (e) => {
						
					}
				})
			},
			getLikeList() {
				uni.request({
					url: this.AjaxUrl + '/WebApi/GetHomeULikeList',
					success: (res) => {
						if (res.statusCode == 200) {
							this.likeList = JSON.parse(res.data.Extend);
							for(let i=0;i<this.likeList.length;i++){
								switch(this.likeList[i].TypeTagDisplay){
									case "二手房":
										this.likeList[i].TypeTagImg1 = 'esf';
										this.likeList[i].TypeTagImgLen1 = '1';
										this.likeList[i].url = "/pages/house/sell/detail/detail";
										break;
									case "新房":
										this.likeList[i].TypeTagImg1 = 'xf';
										this.likeList[i].TypeTagImgLen1 = '3';
										this.likeList[i].url = "/pages/house/new/detail/detail";
										break;
									case "服务":
										this.likeList[i].TypeTagImg1 = 'fw';
										this.likeList[i].TypeTagImgLen1 = '3';
										this.likeList[i].url = "/pagesB/service/detail/detail";
										break;
									case "好物":
										this.likeList[i].TypeTagImg1 = 'hw';
										this.likeList[i].TypeTagImgLen1 = '3';
										this.likeList[i].url = "/pagesB/goods/detail/detail";
										break;
									case "装修":
										this.likeList[i].TypeTagImg1 = 'zx';
										this.likeList[i].TypeTagImgLen1 = '3';
										this.likeList[i].url = "/pagesB/service/detail/detail";
										break;
									case "金融":
										this.likeList[i].TypeTagImg1 = 'jr';
										this.likeList[i].TypeTagImgLen1 = '3';
										this.likeList[i].url = "/pagesB/service/detail/detail";
										break;
									default:
										this.likeList[i].TypeTagImg1 = '';
										this.likeList[i].TypeTagImgLen1 = '';
										this.likeList[i].url = "#";
										break;
								}
								switch(this.likeList[i].TypeTagDisplay2){
									case "售":
										this.likeList[i].TypeTagImg2 = 's';
										this.likeList[i].TypeTagImgLen2 = '2';
										break;
									case "租":
										this.likeList[i].TypeTagImg2 = 'z';
										this.likeList[i].TypeTagImgLen2 = '2';
										break;
									case "清洁":
										this.likeList[i].TypeTagImg2 = 'qj';
										this.likeList[i].TypeTagImgLen2 = '3';
										break;
									default:
										this.likeList[i].TypeTagImg2 = '';
										this.likeList[i].TypeTagImgLen2 = '';
										break;
								}
							}
						}
					},
					fail: (e) => {
					}
				})
			},
		}
	}
</script>

<style lang="less">
    .logo{
        height: 200upx;
        width: 200upx;
        margin-top: 200upx;
    }
    .title {
    	font-size: 36upx;
    	color: #8f8f94;
    }
    .cu-bar.search{
    	min-height: 80upx;
    	background-color: transparent;
    	position: fixed;
    	width: 100%;
    	z-index: 1025;
    	.search-form{
    		border: 2upx solid #ddd;
    		height: 80upx;
    		line-height: 80upx;
    		font-size:28upx;
    	}
    }
	.screen-swiper .menu-icon{
		width: 90upx;
		margin: 0 auto;
		height: 90upx;
	}
    .screen-swiper.square-dot{
    	margin-top: 80upx;
    }
    .model-main>.uni-row.model-item{
    	padding: 30upx;
    	overflow: hidden;
    	position: relative;
    	&:after{
    		content: "";
    		display: block;
    		height: 2upx;
    		width: 100%;
    		background: #CCCCCC;
    		left: 30upx;
    		bottom: 0;
    		position: absolute;
    	}
    	&:last-child:after{
    		display: none;
    	}
    	.cu-avatar-box{
    		.cu-avatar-name{
    			font-size: 32upx;
    			color: #333333;
    			line-height: 48upx;
    		}
    		.cu-avatar-num{
    			font-size: 28upx;
    			color: #999999;
    			line-height: 48upx;
    		}
    		.cu-avatar-main{
    			line-height: 1.5;
    			overflow: hidden;
    			text-overflow: ellipsis;
    			display: -webkit-box;
    			-webkit-line-clamp: 3;
    			-webkit-box-orient: vertical;
    		}
    	}
    }
    .model .model-header{
    	line-height: 70upx;
    	font-size: 32upx;
    	padding: 30upx 30upx 0;
    	line-height: 1;
    }
    .model-item{
    	.model-item-img{
    		width: 260upx;height: 260upx;border-radius: 10upx;
    	}
    	.model-item-text{
    		padding-left: 20upx;
    		position: relative;
    		.model-item-title,
    		.model-item-title2{
    			font-size: 30upx;
    			line-height: 1.5;
    			overflow: hidden;
    			text-overflow: ellipsis;
    			display: -webkit-box;
    			-webkit-line-clamp: 1;
    			-webkit-box-orient: vertical;
    			color: #333333;
    		}
    		.model-item-title{
    			font-weight: 600;
    		    -webkit-line-clamp: 2;
    			height: 96upx;
    			.label-box{
    				height: 32upx;
    				margin-right: 10upx;
    				display: inline-block;
    				vertical-align: text-top;
					&.kind1{
						width:84upx;
					}
					&.kind2{
						width:34upx;
					}
					&.kind3{
						width:58upx;
					}
    			}
    		}
    		.model-item-title2{
    			font-size: 26upx;
    			color: #666666;
    			line-height: 42upx;
    			&.adr{
    				font-size: 24upx;
    			}
    			&.main{
    				.model-item-main-price{
    					font-size: 30upx;
    					color: #E03236;
    					text{
    						font-size: 24upx;
    						margin:0 10upx 0 6upx;
    					}
    				}
    			}
    		}
    		.model-item-main{
    			position: absolute;
    			bottom: 0;
    		}
    	}
    }
</style>
